<template>
  <div class="register">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="姓名">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="form.sex" placeholder="请选择性别">
          <el-option label="男" value="0"></el-option>
          <el-option label="女" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>
      <el-form-item label="微信">
        <el-input v-model="form.weixin"></el-input>
      </el-form-item>
      <el-form-item label="小区名">
        <el-select v-model="form.residentialName" placeholder="请选择小区" @change="getBdList">
          <el-option
            v-for="item in residentialList"
            :key="item.id"
            :label="item.residential_name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="楼栋名">
        <el-select v-model="form.buildingName" placeholder="请选择楼栋">
          <el-option
            v-for="item in buildingList"
            :key="item.id"
            :label="item.buildname"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="住址">
        <el-input v-model="form.address"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>


import {addUserinfo} from "@/api/userregister";
import {getResidentialList} from "@/api/baseSys/residential_manage";
import {getBuildingList} from "@/api/baseSys/buildingmanage";

export default {
  data() {
    return {
      form: {
        name: '',
        sex: '',
        phone:'',
        weixin: '',
        residentialName:'',
        buildingName:'',
        address: '',
      },
      //小区表
      residentialList:[],
      //楼栋表
      buildingList:[],
    }
  },
  created() {
    this.getRsList();
  },
  methods: {
    onSubmit() {
      addUserinfo(this.form).then(response => {
        this.$modal.msgSuccess("新增成功");
        // this.open = false;
      });
    },
    //获取小区列表
    getRsList(){
      this.loading = true;
      getResidentialList().then(response => {
        console.log(response)
        this.residentialList=response.data;
      });
    },
    //获取楼栋列表
    getBdList(){
      this.loading = true;
      const id=this.form.residentialName
      getBuildingList(id).then(response => {
        console.log(response)
        this.buildingList=response.data;
      });
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.register {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  //background-image: url("../assets/images/login-background.jpg");
  background-size: cover;
}
//.title {
//  margin: 0px auto 30px auto;
//  text-align: center;
//  color: #707070;
//}
//
//.register-form {
//  border-radius: 6px;
//  background: #ffffff;
//  width: 400px;
//  padding: 25px 25px 5px 25px;
//  .el-input {
//    height: 38px;
//    input {
//      height: 38px;
//    }
//  }
//  .input-icon {
//    height: 39px;
//    width: 14px;
//    margin-left: 2px;
//  }
//}
//.register-tip {
//  font-size: 13px;
//  text-align: center;
//  color: #bfbfbf;
//}
//.register-code {
//  width: 33%;
//  height: 38px;
//  float: right;
//  img {
//    cursor: pointer;
//    vertical-align: middle;
//  }
//}
//.el-register-footer {
//  height: 40px;
//  line-height: 40px;
//  position: fixed;
//  bottom: 0;
//  width: 100%;
//  text-align: center;
//  color: #fff;
//  font-family: Arial;
//  font-size: 12px;
//  letter-spacing: 1px;
//}
//.register-code-img {
//  height: 38px;
//}
</style>
